<template>
    <div id="toolbar" v-show="toolbarIsShow" transition="expand">
        <i class="glyphicon logo"><img src="../assets/touxiiang.png" class="avatar"></i>
        <i @click="newNote" title="添加一个新的笔记" class="glyphicon glyphicon-plus"> </i>
        <i @click="toggleFavorite" title="收藏/取消收藏选中的笔记" class="glyphicon glyphicon-star" :class="{starred: activeNote.favorite}"> </i>
        <i @click="deleteNote" title="删除选中的笔记" class="glyphicon glyphicon-trash"> </i>
        <i @click="toggleShow" class="glyphicon glyphicon-chevron-left"> </i>
    </div>
</template>
<script>
    import { newNote, deleteNote, toggleFavorite } from '../vuex/action'
    import { activeNote } from '../vuex/getter'
    export default{
        data: function () {
            return {
                toolbarIsShow: true
            }
        },
        vuex: {
            getters: {
                activeNote
            },
            actions: {
                newNote,
                deleteNote,
                toggleFavorite
            }
        },
        methods: {
            toggleShow: function () {
                this.toolbarIsShow = !this.toolbarIsShow

                let self = this
                setTimeout(() => {
                    self.toolbarIsShow = !self.toolbarIsShow
                }, 3000)
            }
        }
    }
</script>

<style lang="scss" scoped>
    #toolbar{
        float: left;
        width: 80px;
        height: 100%;
        background-color: #30414d;
        color: #767676;
        padding: 35px 25px 25px 25px;

        .starred{
            color: #F7AE4F
        }

        i{
            font-size: 30px;
            margin-bottom: 35px;
            cursor: pointer;
            opacity: .8;
            transition: opacify 1s ease;

            &:hover{
                opacity: 1;
            }
            &:last-child{
                bottom: 0;
                position: absolute;
                top: calc(100% - 60px)
            }
        }

        .avatar{
            border-radius: 50%;
            border: 3px #fff solid;
            margin: -10px;
            width: 50px;
            height: 50px;
        }
    }

    .expand-transition {
        overflow: hidden;
        height: 30px;
        padding: 10px;
    }
    .expand-enter {
        animation: expand-in .1s linear;
    }
    .expand-leave {
        animation: expand-out .1s linear;
    }
    @keyframes expand-in {
        from {
            width: 0;
            padding: 0;
        }
        to {
            width: 80px;
            padding: 35px 25px 25px 25px;
        }
    }
    @keyframes expand-out {
        from {
            width: 80px;
            padding: 35px 25px 25px 25px;
        }
        to {
            width: 0;
            padding: 0;
        }
    }

</style>
